<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可编辑表格</title>
</head>
<body>
    <label for="username">姓名</label>
    <input type="text" id="username" name="username">
    <label for="age">年龄</label>
    <input type="text" id="age" name="age">
    <label for="tel">电话</label>
    <input type="text" id="tel" name="tel">
    <label for="qq">QQ号</label>
    <input type="text" id="qq" name="qq">
    <button id="btnSave">保存</button>
    <div class="list">
        <table id="tableList">
            <thead>
                <tr>
                    <th width="40">序号</th>
                    <th width="160">姓名</th>
                    <th width="60">年龄</th>
                    <th width="160">电话</th>
                    <th width="160">QQ号</th>
                    <th width="60">操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <script>
            // 获取页面元素
            var username = document.getElementById('username')
            var age = document.getElementById('age')
            var tel = document.getElementById('tel')
            var qq = document.getElementById('qq')
            var btnSave = document.getElementById('btnSave')
            var tableList = document.getElementById('tableList')
            var tbody = tableList.children[1];
            // 序号
            var index =1
            // 生成表格
            btnSave.onclick=function(){
                // 生成一行
                var tr = document.createElement('tr')
                tr.innerHTML='<td>'+index++ +'</td><td class="name">'+username.value+'</td><td class="name">'+age.value+'</td><td class="name">'+ tel.value + '</td><td  class="name">' + qq.value + '</td><td><button class="btnDel">删除</td>';

                // 把行添加到表格
                tbody.appendChild(tr)
                
                // 使用事件委托删除功能
                tr.onclick=function(e){
                    // 判断鼠标点击的是否是当前删除按钮
                    if(e.target.className==='btnDel'){
                        e.target.parentNode.parentNode.remove()
                    }

                    var flag = false
                    if(e.target.className==='name'){
                        if(!flag){
                            var input = document.createElement('input');
                            input.value = e.target.innerHTML;
                            e.target.innerHTML=''
                            e.target.appendChild(input)
                            // input自动获取焦点
                            input.focus();
                            // 添加input元素之后 把这个标识改为true，表示已经有input了
                            flag = true
                        }
                        // 当input失去焦点的时候 ，移出input元素 ，并且input的内容给到td
                        input.onblur = function () {
                            // 当失去焦点 移出input之后，把标识改为 false，表示 td中没有input元素了

                            flag = false
                            // item.innerHTML = input.value
                            // 拿input.value 来替换 item的所有内容
                            e.target.innerHTML = input.value
                        }

                    }

                }

                // 

            }
        </script>
</body>
</html>